<template>
  <div id="contentRight">
    <section id="sec1">
      <p class="guide">
        <router-link to="/asset">资产总览&nbsp;&nbsp;>&nbsp;</router-link>
        <router-link to="/outCoins">提币&nbsp;&nbsp;>&nbsp;</router-link>
        <span>提币地址管理</span>
      </p>
      <div class="d2">
        <div class="cl">
          <p>币种</p>
          <div>
            <el-select v-model="selCoin" placeholder="请选择币种" class="coinsType">
              <el-option
                v-for="item in coinList" :key="item.value" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="cl">
          <p>提币地址</p>
          <div>
            <input type="text" placeholder="请输入提币地址" v-model="address">
          </div>
        </div>
        <div class="cl">
          <p>备注</p>
          <div>
            <input type="text" placeholder="请输入备注" v-model="remark">
          </div>
        </div>
      </div>
      <p class="p3">
        <button @click="addAddress">添加</button>
      </p>
    </section>
    <section id="sec2">
      <p class="p1">提币地址列表</p>
      <table>
        <thead>
          <tr>
            <td>币种</td>
            <td>提币地址</td>
            <td>备注</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item ,index) in addressList">
            <th>{{item.currency_code}}</th>
            <th>{{item.wallet_address}}</th>
            <th>{{item.remark}}</th>
            <th class="del hoverhand">
              <span @click="delItem(item.id)" >删除</span>
            </th>
          </tr>
        </tbody>
      </table>
      <div class="noData" v-if="addressList.length === 0">
        <img src="../common/imgs/billNull.png" alt="空">
        <p>暂无数据</p>
      </div>
    </section>
    <get-phonecode ref="addVerfiyPws" @confirm="confirmAdd" :openPhoneCode="1" :openTransPws="2"></get-phonecode>
<!--    <get-phonecode ref="delVerfiyPws" @confirm="confirmDel" :openTongdun="1" :openTransPws="2"></get-phonecode>-->
    <danger-dialog ref="digDg" v-bind:element="dialogConfirm" confirmBtn='确认删除' titleTxt="刪除提币地址" @confirm="confirmDel"></danger-dialog>
  </div>
</template>
<script>
  import { otherAddressList  , addOtherAddressList  , delOtherAddressList } from '../http/api';
  export default {
    name: 'outCoins',
    inject: ['reload'],
    data() {
      return {
        coinList : [
          { name :'BTC' ,value : 'BTC' ,} , { name : 'ETH',value : 'ETH' }, { name : 'LTC',value : 'LTC' },
          { name : 'BHP(交易账户)', value : 'BHP' } ,{ name : 'USDT',value : 'USDT' },
        ],
        selCoin : 'BTC',
        addressList : [], // 地址列表
        address : null, //地址
        remark : null,//备注
        delItemId : null,
        dialogConfirm:'<p style="color: #666;font-size: 16px;text-align: center;line-height: 170%;padding: 0 43px">您确定要刪除该地址吗？</p>',
      }
    },
    components:{
      ElSelect :  require('element-ui').Select, /*select*/
      ElOption : require('element-ui').Option, /*Option*/
      DangerDialog : resolve => { require(['../components/DangerDialog'], resolve) },/*确认弹窗*/
      GetPhonecode : resolve => { require(['../components/GetMbcode'], resolve) },/*验证弹窗*/
    },
    mounted() {
     this.loadPage();
    },
    watch:{
      'selCoin'(){
        this.loadPage();
      }
    },
    methods:{
      loadPage(){
        otherAddressList({currency_code : this.selCoin }).then(res => {
          if(res.code == 200){
            this.addressList = res.data.lists;
          }
        });
      },
      delItem(id){
        //删除
        this.delItemId = id;
        this.$refs.digDg.dialogShow();
      },
      confirmDel(){
        //确认删除
        let thiz = this;
        delOtherAddressList({ id : this.delItemId }).then(res => {
          if(res.code == 200){
            require('../common/js/toast').toast('删除成功');
            this.timeout(function () {
              thiz.loadPage();
            },1500)
          }
        });
      },
      addAddress(){
        //添加
        if(!this.address){
          require('../common/js/toast').toast('请输入提币地址');
          return
        }
        this.$refs.addVerfiyPws.dialogShow();
      },
      confirmAdd( mbRes ){
        //确认添加
        let thiz = this;
        let param = {
          currency_code : this.selCoin , address : this.address , remark : this.remark || '无' ,sms_code : mbRes.code }
        addOtherAddressList(param).then(res => {
          if(res.code == 200){
            require('../common/js/toast').toast('添加成功');
            thiz.address = null;
            thiz.$refs.addVerfiyPws.hide();
            thiz.loadPage();
            thiz.timeout(function () {
              thiz.$refs.addVerfiyPws.hide();
            },1500)
          }else{
            thiz.$refs.addVerfiyPws.reset();
          }
        });
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #sec1{
    >.d2{
      overflow: hidden;padding-top: 58px;
      >.cl{
        float: left;margin-left: 18px;
        >p{
          padding-bottom: 14px;color: #999;font-size: 14px;
        }
        &:first-child{
          width: 150px;margin-left: 0;
          /deep/ .el-select , /deep/ input{
            width: 100%;
          }
        }
        &:nth-child(2),&:nth-child(3){
          width: 350px;
          input{
            .input();width: 100%;height: 40px;padding: 0 9px;
          }
        }
      }
    }
    >.p3{
      padding-top: 14px;
      >button{
        .submit;width: 160px;height: 38px;line-height: 38px;font-size: 16px;
      }
    }
  }
  #sec2{
    padding-bottom: 60px;min-height: 400px;
    >.p1{
      color: #262626;font-size: 16px;padding-bottom: 31px;
    }
    margin-top: 12px;
    >table{
      width: 100%;text-align: left;
      th,td{
        font-weight: 500;font-size: 14px;
      }
      thead>tr>td:last-child{
        padding-right: 15px;
      }
      thead>tr>td:last-child,tbody>tr>th:last-child{
        text-align: right;
      }
      tbody th{
        padding-top: 27px;
      }
      tbody .del{
        .colorYellow;
        >span{
          padding: 0 15px;
        }
      }
    }
    >.noData{
      text-align: center;font-size: 0;padding: 50px 0;
      >img{
        width: 100px;
      }
      >p{
        color: #999;font-size: 14px;
      }
    }
  }
</style>
